<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div>话题详情</div>
			<div @click="show = true" class="more">
				<img src="../../static/img/icon/find_icon/more.png" style="width: 20px;height: 5px;"/>
			</div>
		</div>
		<div class="header-null"></div>
		<div class="conversationDetail">
			<div class="conversationDetail-left">
				<img :src="info.img_path"/>
			</div>
			<div class="conversationDetail-right">
				<div class="title">
					#{{info.t_name}}#
				</div>
				<div class="content">
					{{info.t_desc}}
				</div>
			</div>
		</div>
		<div class="num">
			<div>浏览{{info.viewCount || 0}}次</div>
			<div>{{info.count}}参与</div>
		</div>
		<div class="classification">
			<div class="item" v-for="(item, index) in list" @tap="route('conversationDetail', item.topic_id)">
				<div>#{{item.t_name}}#</div>
				<div v-if="index%2 == 0">/</div>
			</div>
		</div>
		<div class="list">
			<div class="item" v-for="item in data" @tap="route('forumDetail', item.ChildTopicID)">
				<div class="item-header">
					<img :src="item.topicPicture"/>
				</div>
				<div>
					<div class="item-title">
						{{item.topicName}}
					</div>
					<div class="item-bottom">
						<div>
							<div>
								<img src="../../static/img/icon/my_icon/pinglun_luntan@3x.png"/>
								<div>{{item.comment_count || 0}}</div>
							</div>
						</div>
						<div>
							<div>
								<img src="../../static/img/icon/find_icon/collection@3x.png"/>
								<div>{{item.collect_count || 0}}</div>
							</div>
						</div>
						<div>
							<div>
								<img src="../../static/img/icon/my_icon/heart_luntan@3x.png"/>
								<div>{{item.like_count || 0}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="create-fixed" @click="route('participate')">
			<img src="../../static/img/icon/home_icon/riji_xuanzhong@2x.png"/>
		</div>
		<v-share :dialog="show" @hide="show = false"></v-share>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	import VShare from '../base/v-share'
	export default {
		data() {
			return {
				list: [],
				data: [1,1],
				info: {},
				show: false
			}
		},
		components: {
			VShare
		},
		methods: {
			init() { //默认加载
				this.$store.state.isLoading = true
				getData('/topic/appFindTopicById', {
					token: sessionStorage.token,
					topicId: this.$route.params.id
				}).then(d => {
					this.$store.state.isLoading = false
					this.info = d.topic
					this.list = d.listTopic
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
				
				getData('/childtopic/getChildByTopicIdApi', {
					token: sessionStorage.token,
					topicId: this.$route.params.id,
					pn: 1
				}).then(d => {
					if(d.code == 1) {
						d.pageInfo.list.map(x => {
							x.topicPicture = x.topicPicture.split(',')[0]
						})
						this.data = d.pageInfo.list
						this.lastPage = d.pageInfo.lastPage
					}
				}).catch(err => {
					console.log(err)
				})
			},
		},
		mounted() {
			this.init()
		},
		watch: {
			'$route': 'init'
		}
	}
</script>

<style scoped lang="less">
	.conversationDetail {
		padding: 10px;
		display: flex;
		background: #fff;
		
		.conversationDetail-left {
			width: 140px;
			height: 80px;
			margin-right: 10px;
			
			img {
				width: 100%;
				height: 100%;
			}
		}
		
		.conversationDetail-right {
			width: 100%;
			
			.title {
				font-weight: bold;
				font-size: 15px;
				margin-bottom: 10px;
			}
			
			.content {
				font-size: 13px;
				margin-bottom: 10px;
			}
		}
	}
	
	.num {
		display: flex;
		justify-content: space-between;
		background: #fff;
		align-items: center;
		padding: 0 10px 10px;
		
		div:last-child {
			border-radius: 5px;
			padding: 2px 20px;
			background: #e5e5e5;
		}
	}
	
	.classification {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		background: #fff;
		
		.item {
			width: 50%;
			padding: 10px 0 10px 10px;
			display: flex;
			justify-content: space-between;
		}
	}
	
	.list {
		display: flex;
		flex-wrap: wrap;
		
		.item {
			width: 46%;
			margin: 10px;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			&:nth-child(even) {
				margin-left: 0;
			}
			
			.item-header {
				width: 100%;
				
				
				img {
					width: 100%;
					/*height: 100%;*/
					min-height: 100px;
				}
			}
			
			.item-title {
				font-weight: bold;
				font-size: 13px;
				margin: 5px;
			}
			
			.item-bottom {
				display: flex;
				height: 40px;
				justify-content: center;
				text-align: center;
				
				div {
					display: -webkit-box;
					align-items: center;
					flex: 1;
					
					div {
						display: flex;
						margin: 0 auto;
						align-items: center;
					}
					
					img {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
			}
		}
	}
	
	.create-fixed {
		position: fixed;
		bottom: 4%;
		right: 20px;
		width: 40px;
		height: 40px;
		z-index: 3;
		img {
			width: 100%;
		}
	}
</style>